<html>
<head>
    <meta charset="utf-8">
    <title>React 学习！！</title>
</head>
<body>
<div id="app"></div>
<script src="../bower_components/react/react.min.js"></script>
<script src="../bower_components/react/react-dom.min.js"></script>
<script src="../bower_components/react/browser.min.js"></script>
<style type="text/css">
    #container{
      background: gray;
    }
    .container{
      color:white;
    }
</style>
<script type="text/babel">
    /*
      1.我们在设置对象id的时候，可以查看到其属性设置
      2.但我们在设置对象class的时候，却无法查看到其属性设置
      3.需要将class属性设置修改为className才可进行class属性设置，原因是class是react的关键字
     */
    var MessageBox = React.createClass({
      render:function(){
        return (  <div id="container" className="container">
                    <h1>Hello React!</h1>
                    <p>React content message</p>
                  </div>
               )
      }
    });
    ReactDOM.render( <MessageBox/>, 
      document.getElementById('app'),
      function(){
        console.log('渲染完成啦！！');
      }
    )
</script>
</body>
</html>